<template>
  <div>
    <el-card style="margin: 0px 10px 10px 10px;">
      <!-- 测试文字1 -->
      <!-- 注：“inline”是“布尔属性”，也可以把代码写作“:inline="true"”↓ -->
      <el-form inline>
        <el-form-item label="一级分类">
          <!-- 注：“change”事件在“菜单项的选中值发生变化”时触发，在这个项目中，它可以保证开发者已经获取到“一级、二级、三级分类的ID”↓ -->
          <el-select v-model="categoryStore.idOfCategory1" :disabled="aVariableUsedToControlWhichDivElementUnderTheElCardComponentShouldBeShown == 'aDivElementIncludeTable'?false:true" @change="aFunctionBeUsedToInformTheStoreToGetTheDataOfCategory2">
          <!-- <el-select v-model="categoryStore.idOfCategory1" @change="aFunctionBeUsedToInformTheStoreToGetTheDataOfCategory2"> -->
          <!-- <el-select v-model="idOfCategory1"> -->
          <!-- <el-option label="北京"></el-option>
              <el-option label="上海"></el-option>
              <el-option label="广州"></el-option>
              <el-option label="深圳"></el-option> -->
          <!-- 注：对于“el-option”组件来说，“label”属性的值就是“下拉菜单项中显示的文字”，“value”属性的值就是“开发者需要通过下拉菜单项来收集到的数据”↓ -->
          <!-- <el-option v-for="(category1,index) in anArrayThatStoreTheDataOfCategory1" :key="category1.id" :label="category1.name" :value="category1.id"></el-option> -->
          <!-- </el-select> -->
          <el-option v-for="(category1,index) in categoryStore.anArrayThatStoreTheDataOfCategory1" :key="category1.id" :label="category1.name" :value="category1.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类">
        <el-select v-model="categoryStore.idOfCategory2" :disabled="aVariableUsedToControlWhichDivElementUnderTheElCardComponentShouldBeShown == 'aDivElementIncludeTable'?false:true" @change="aFunctionBeUsedToInformTheStoreToGetTheDataOfCategory3">
          <!-- <el-option label="北京"></el-option>
          <el-option label="上海"></el-option>
          <el-option label="广州"></el-option>
          <el-option label="深圳"></el-option> -->
          <el-option v-for="(category2,index) in categoryStore.anArrayThatStoreTheDataOfCategory2" :key="category2.id" :label="category2.name" :value="category2.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类">
        <el-select v-model="categoryStore.idOfCategory3" :disabled="aVariableUsedToControlWhichDivElementUnderTheElCardComponentShouldBeShown == 'aDivElementIncludeTable'?false:true">
          <!-- <el-option label="北京"></el-option>
          <el-option label="上海"></el-option>
          <el-option label="广州"></el-option>
          <el-option label="深圳"></el-option> -->
          <el-option v-for="(category3,index) in categoryStore.anArrayThatStoreTheDataOfCategory3" :key="category3.id" :label="category3.name" :value="category3.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script lang="ts" setup name="Category">
/* // 导入向获取各级分类的接口发送请求时需要用到的方法↓
import { requestCategory1,requestCategory2,requestCategory3 } from "@/api/product/attr";
// 导入生命周期钩子函数“onMounted”（作用是在组件挂载完毕时就发送一次请求，以获取到一级分类的数据，在一级分类列表中展示）↓
import { onMounted,ref } from "vue";
// 定义一个数组，用来存储一级分类的数据↓
let anArrayThatStoreTheDataOfCategory1 = ref<any>([]);
// let idOfCategory1 = ref<number>(0);
let idOfCategory1 = ref<number | string>("");
onMounted(() => {
  getTheDataOfCategory1();
}); */
/**
 * 函数“getTheDataOfCategory1”被用于“获取一级分类的数据”
 */
/* async function getTheDataOfCategory1() {
  console.log("获取一级分类的数据的函数被执行了");
  let result:any = await requestCategory1()
  console.log(result); // {code: 200, message: '成功', data: Array(17), ok: true}
  if (result.code == 200) {
    anArrayThatStoreTheDataOfCategory1.value = result.data;    
  }
} */
import { onMounted } from "vue";
// 导入与“商品分类”有关的仓库↓
import useCategoryStore from "@/store/modules/category";
// 获取该仓库的实例对象↓
let categoryStore = useCategoryStore();
// 接收父组件传递过来的数据“aVariableUsedToControlWhichDivElementUnderTheElCardComponentShouldBeShown”（这个数据被用于在增加或者修改商品属性时，把选择各级分类的下拉菜单变为“禁用状态”）↓
defineProps(['aVariableUsedToControlWhichDivElementUnderTheElCardComponentShouldBeShown'])
// 当全局组件“Category”被挂载完毕时，通知仓库发送请求获取一级分类的数据↓
onMounted(() => {
  aFunctionBeUsedToInformTheStoreToGetTheDataOfCategory1();
})
/**
 * 函数“aFunctionBeUsedToInformTheStoreToGetTheDataOfCategory1”被用于“通知仓库发送请求获取一级分类的数据”
 */
function aFunctionBeUsedToInformTheStoreToGetTheDataOfCategory1() {
  console.log("通知仓库发送请求获取一级分类的数据的函数被执行了");
  // 调用仓库中的方法来获取一级分类的数据↓
  categoryStore.getTheDataOfCategory1();
}
/**
 * 函数“aFunctionBeUsedToInformTheStoreToGetTheDataOfCategory2”被用于“通知仓库发送请求获取二级分类的数据”
 */
function aFunctionBeUsedToInformTheStoreToGetTheDataOfCategory2() {
  // 注：如果用户已经选中了某一个一级分类，且接连选中了这个分类下的二级和三级分类，但又重新选择了另一个一级分类，那么在用户再次选择一级分类时，需要先清空原有的二级分类和三级分类的数据↓
  categoryStore.idOfCategory2 = "";
  // 注：经实测，是否手动清空数组均可（因为清空二级和三级分类的ID后，界面上的下拉菜单中的数据会被自动清空）↓
  // categoryStore.anArrayThatStoreTheDataOfCategory2 = [];
  categoryStore.idOfCategory3 = "";
  // categoryStore.anArrayThatStoreTheDataOfCategory3 = [];
  console.log(`通知仓库发送请求获取二级分类的数据的函数被调用了,获取到的一级分类的ID是${categoryStore.idOfCategory1}`)
  // 调用仓库中的方法来获取二级分类的数据↓
  categoryStore.getTheDataOfCategory2()
}
/**
 * 函数“aFunctionBeUsedToInformTheStoreToGetTheDataOfCategory3”被用于“通知仓库发送请求获取三级分类的数据”
 */
function aFunctionBeUsedToInformTheStoreToGetTheDataOfCategory3() {
  // 注：如果用户已经选中了某一个二级分类，且接连选中了这个分类下的三级分类，但又重新选择了另一个二级分类，那么在用户再次选择二级分类时，需要先清空原有的三级分类的数据↓
  categoryStore.idOfCategory3 = "";
  // categoryStore.anArrayThatStoreTheDataOfCategory3 = [];
  console.log(`通知仓库发送请求获取三级分类的数据的函数被调用了,获取到的二级分类的ID是${categoryStore.idOfCategory2}`)
  // 调用仓库中的方法来获取三级分类的数据↓
  categoryStore.getTheDataOfCategory3()
}
</script>

<style scoped></style>